import 'babel-polyfill';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link } from '$router';
import HomePage from './home';
import yoHistory from '../common/history';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import fetchReducer from './fetchReducer'
const store = createStore(fetchReducer, applyMiddleware(thunk));

const List = require.async('./list');
const Detail = require.async('./detail');
const Skill = require.async('./skill');
const Project = require.async('./project');
const Minemy = require.async('./minemy');

const Root = () => (
    <Router history={yoHistory}>
        <Route path="/">
            <IndexRoute component={HomePage} />
            <Route path="list" getComponent={List} />
            <Route path="detail" getComponent={Detail} />
            <Route path="project" getComponent={Project} />
            <Route path="minemy" getComponent={Minemy} />
            <Route path="skill" data={store.getState()} dispatch={(arg) => { store.dispatch(arg) }} getComponent={Skill} />
        </Route>
    </Router>
);
function renderIt() {
    ReactDOM.render(<Root />, document.getElementById('root'));
}

renderIt()
store.subscribe(renderIt)